import Table, { type ColumnsType } from "antd/es/table";
import { isNil } from "ramda";
import { useState } from "react";
import type { Permission_Old } from "#/entity";
import { BasicStatus, PermissionType } from "#/enum";
import { Icon } from "@/components/icon";
import { Badge } from "@/ui/badge";
import { Button } from "@/ui/button";
import { Card, CardContent, CardHeader } from "@/ui/card";
import PermissionModal, { type PermissionModalProps } from "./permission-modal";

const defaultPermissionValue: Permission_Old = {
	id: "",
	parentId: "",
	name: "",
	label: "",
	route: "",
	component: "",
	icon: "",
	hide: false,
	status: BasicStatus.ENABLE,
	type: PermissionType.CATALOGUE,
};

// 初始化权限数据 - 以古诗词命名体现中华文化
const initialPermissionData: Permission_Old[] = [
	{
		id: "1",
		parentId: "",
		name: "dashboard",
		label: "主控台",
		route: "/dashboard",
		component: "",
		icon: "ic-dashboard",
		hide: false,
		status: BasicStatus.ENABLE,
		type: PermissionType.CATALOGUE,
		order: 1,
		children: [
			{
				id: "11",
				parentId: "1",
				name: "analysis",
				label: "数据分析 - 明月几时有",
				route: "/dashboard/analysis",
				component: "/dashboard/analysis/index.tsx",
				icon: "ic-analytics",
				hide: false,
				status: BasicStatus.ENABLE,
				type: PermissionType.MENU,
				order: 1,
			},
			{
				id: "12",
				parentId: "1",
				name: "workbench",
				label: "工作台 - 千里共婵娟",
				route: "/dashboard/workbench",
				component: "/dashboard/workbench/index.tsx",
				icon: "ic-workbench",
				hide: false,
				status: BasicStatus.ENABLE,
				type: PermissionType.MENU,
				order: 2,
			},
		],
	},
	{
		id: "2",
		parentId: "",
		name: "management",
		label: "系统管理",
		route: "/management",
		component: "",
		icon: "ic-management",
		hide: false,
		status: BasicStatus.ENABLE,
		type: PermissionType.CATALOGUE,
		order: 2,
		children: [
			{
				id: "21",
				parentId: "2",
				name: "system",
				label: "系统设置 - 采菊东篱下",
				route: "/management/system",
				component: "",
				icon: "ic-system",
				hide: false,
				status: BasicStatus.ENABLE,
				type: PermissionType.CATALOGUE,
				order: 1,
				children: [
					{
						id: "211",
						parentId: "21",
						name: "user",
						label: "用户管理 - 悠然见南山",
						route: "/management/system/user",
						component: "/management/system/user/index.tsx",
						icon: "ic-user",
						hide: false,
						status: BasicStatus.ENABLE,
						type: PermissionType.MENU,
						order: 1,
					},
					{
						id: "212",
						parentId: "21",
						name: "role",
						label: "角色管理 - 山气日夕佳",
						route: "/management/system/role",
						component: "/management/system/role/index.tsx",
						icon: "ic-role",
						hide: false,
						status: BasicStatus.ENABLE,
						type: PermissionType.MENU,
						order: 2,
					},
					{
						id: "213",
						parentId: "21",
						name: "permission",
						label: "权限管理 - 飞鸟相与还",
						route: "/management/system/permission",
						component: "/management/system/permission/index.tsx",
						icon: "ic-permission",
						hide: false,
						status: BasicStatus.ENABLE,
						type: PermissionType.MENU,
						order: 3,
					},
				],
			},
		],
	},
	{
		id: "3",
		parentId: "",
		name: "components",
		label: "组件库",
		route: "/components",
		component: "",
		icon: "ic-component",
		hide: false,
		status: BasicStatus.ENABLE,
		type: PermissionType.CATALOGUE,
		order: 3,
		children: [
			{
				id: "31",
				parentId: "3",
				name: "chart",
				label: "图表组件 - 春江潮水连海平",
				route: "/components/chart",
				component: "/components/chart/index.tsx",
				icon: "ic-chart",
				hide: false,
				status: BasicStatus.ENABLE,
				type: PermissionType.MENU,
				order: 1,
			},
			{
				id: "32",
				parentId: "3",
				name: "upload",
				label: "上传组件 - 海上明月共潮生",
				route: "/components/upload",
				component: "/components/upload/index.tsx",
				icon: "ic-upload",
				hide: false,
				status: BasicStatus.DISABLE,
				type: PermissionType.MENU,
				order: 2,
			},
		],
	},
];
export default function PermissionPage() {
	// const permissions = useUserPermission();
	const [permissionModalProps, setPermissionModalProps] = useState<PermissionModalProps>({
		formValue: { ...defaultPermissionValue },
		title: "新建权限",
		show: false,
		onOk: () => {
			setPermissionModalProps((prev) => ({ ...prev, show: false }));
		},
		onCancel: () => {
			setPermissionModalProps((prev) => ({ ...prev, show: false }));
		},
	});

	// 权限类型中文映射 - 融入诗意元素
	const getPermissionTypeLabel = (type: PermissionType) => {
		switch (type) {
			case PermissionType.CATALOGUE:
				return "目录 - 书山有路";
			case PermissionType.MENU:
				return "菜单 - 学海无涯";
			default:
				return "未知 - 雾里看花";
		}
	};

	const columns: ColumnsType<Permission_Old> = [
		{
			title: "权限名称",
			dataIndex: "name",
			width: 300,
			render: (_, record) => <div className="font-medium">{record.label}</div>,
		},
		{
			title: "类型",
			dataIndex: "type",
			width: 120,
			render: (_, record) => <Badge variant="info">{getPermissionTypeLabel(record.type)}</Badge>,
		},
		{
			title: "图标",
			dataIndex: "icon",
			width: 60,
			align: "center",
			render: (icon: string) => {
				if (isNil(icon)) return <span className="text-gray-400">无</span>;
				if (icon.startsWith("ic")) {
					return <Icon icon={`local:${icon}`} size={18} className="ant-menu-item-icon" />;
				}
				return <Icon icon={icon} size={18} className="ant-menu-item-icon" />;
			},
		},
		{
			title: "组件路径",
			dataIndex: "component",
			render: (component: string) => (
				<span className="text-xs text-gray-600 font-mono">
					{component || <span className="text-gray-400 italic">空山不见人</span>}
				</span>
			),
		},
		{
			title: "状态",
			dataIndex: "status",
			align: "center",
			width: 100,
			render: (status) => (
				<Badge variant={status === BasicStatus.DISABLE ? "error" : "success"}>
					{status === BasicStatus.DISABLE ? "禁用" : "启用"}
				</Badge>
			),
		},
		{
			title: "排序",
			dataIndex: "order",
			width: 60,
			align: "center",
			render: (order) => <span className="text-gray-600">{order || "-"}</span>,
		},
		{
			title: "操作",
			key: "operation",
			align: "center",
			width: 120,
			render: (_, record) => (
				<div className="flex w-full justify-center gap-1 text-gray-600">
					{record?.type === PermissionType.CATALOGUE && (
						<Button variant="ghost" size="icon" onClick={() => onCreate(record.id)} title="添加子权限 - 青出于蓝">
							<Icon icon="gridicons:add-outline" size={16} />
						</Button>
					)}
					<Button variant="ghost" size="icon" onClick={() => onEdit(record)} title="编辑权限 - 精益求精">
						<Icon icon="solar:pen-bold-duotone" size={16} />
					</Button>
					<Button variant="ghost" size="icon" title="删除权限 - 化为乌有">
						<Icon icon="mingcute:delete-2-fill" size={16} className="text-error!" />
					</Button>
				</div>
			),
		},
	];

	const onCreate = (parentId?: string) => {
		setPermissionModalProps((prev) => ({
			...prev,
			show: true,
			title: "新建权限 - 千里之行始于足下",
			formValue: { ...defaultPermissionValue, parentId: parentId ?? "" },
		}));
	};

	const onEdit = (formValue: Permission_Old) => {
		setPermissionModalProps((prev) => ({
			...prev,
			show: true,
			title: "编辑权限 - 温故而知新",
			formValue,
		}));
	};

	return (
		<Card>
			<CardHeader>
				<div className="flex items-center justify-between">
					<div className="text-lg font-semibold">权限管理 - 运筹帷幄之中，决胜千里之外</div>
					<Button onClick={() => onCreate()} className="bg-primary hover:bg-primary/90">
						<Icon icon="gridicons:add-outline" size={16} className="mr-2" />
						新建权限
					</Button>
				</div>
			</CardHeader>
			<CardContent>
				<Table
					rowKey="id"
					size="small"
					scroll={{ x: "max-content" }}
					pagination={false}
					columns={columns}
					dataSource={initialPermissionData}
					className="border rounded-lg"
					expandable={{
						defaultExpandAllRows: true,
						indentSize: 20,
					}}
				/>
			</CardContent>
			<PermissionModal {...permissionModalProps} />
		</Card>
	);
}
